<template>
	<view class="interaction-messages">
		<view class="box-bg">
			<uni-nav-bar shadow left-icon="left" title="互动信息" :border='false' :shadow='false' @clickLeft="goBack" />
		</view>
		<header>
			<nav class="nav-tabs">
				<span :class="{ 'active-tab': activeTab === 'all' }" @click="activeTab = 'all'">全部</span>
				<span :class="{ 'active-tab': activeTab === 'comments' }" @click="activeTab = 'comments'">收到评论</span>
				<span :class="{ 'active-tab': activeTab === 'likes' }" @click="activeTab = 'likes'">收到的赞</span>
			</nav>
		</header>
		<main>
			<view v-for="message in filteredMessages" :key="message.id" class="message-item">
				<view class="user-info">
					<img :src="message.avatar" alt="avatar" class="avatar" />
					<view class="user-details">
						<span class="username">{{ message.username }}</span>
						<span class="time">{{ message.time }}</span>
					</view>
				</view>
				<view class="message-content">
					<p class="pl">{{ message.text }}</p>
					<view v-if="message.comment" class="comment">
						<span class="comment-label">[我的评论]</span>
						<p style="white-space: normal; word-break: break-all">{{ message.comment }}</p>
					</view>
				</view>
			</view>
		</main>
	</view>
</template>

<script setup>
	import {
		ref,computed
	} from "vue"
	
	const activeTab = ref("all")
	const messages = ref([{
			id: 1,
			username: "果汁分你一半",
			avatar: "https://cdn8.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u632.svg",
			time: "刚才 评论了你",
			text: "故宫果然十分庄严，太震撼了",
			comment: "北京故宫坐落在北京中轴线的中间,是世界上最大的木结构宫殿,也...",
			type: "comment"
		},
		{
			id: 2,
			username: "飞来飞去",
			avatar: "	https://cdn8.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u626.svg",
			time: "6分钟前 点赞了你",
			text: "",
			comment: "金黄色的琉璃瓦下,是一排朱红的围墙,装点着它...",
			type: "like"
		},
		{
			id: 3,
			username: "王仙芝的鱼儿",
			avatar: "https://cdn8.axureshop.com/demo2024/2251242/images/%E6%B8%B8%E5%AE%A2%E8%AF%84%E8%AE%BA/u812.svg",
			time: "6小时前 点赞了你",
			text: "",
			comment: "北京十大拍照打卡地,梅思带你游个遍",
			type: "like"
		}
	])
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const filteredMessages=computed(()=>{
		return messages.value.filter(message => {
			switch (activeTab.value) {
				case 'all':
					return true;
				case 'comments':
					return message.type === 'comment';
				case 'likes':
					return message.type === 'like';
				default:
					return false;
			}
		});
	})
		
	
</script>

<style scoped>
	.pl {
		padding: 10rpx;
		font-size: 16px;
	}

	.message-item {
		padding: 20rpx;
	}

	.message-content {
		padding: 20rpx;
	}

	.interaction-messages {
		/* padding: 10px; */
		font-family: Arial, sans-serif;
	}

	header {
		background-color: #f8f8f8;
		padding: 20rpx;
		border-bottom: 2rpx solid #ddd;
		/* 添加底部边框 */
	}

	.nav-tabs {
		display: flex;
		justify-content: space-around;
		/* 平均分布导航项 */
	}

	nav span {
		cursor: pointer;
		color: #333;
		padding: 20rpx;
		/* 添加内边距 */
		border-bottom: 4rpx solid transparent;
		/* 默认无边框 */
	}

	.active-tab {
		font-weight: bold;
		color: #007bff;
		border-bottom: 4rpx solid #007bff;
		/* 选中时的底部边框 */
	}

	.message-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #eee;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-details {
		display: flex;
		flex-direction: column;
	}

	.username {
		font-weight: bold;
		color: #555;
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}

	.message-content {
		flex: 1;
	}

	.message-content p {
		margin: 0;
		color: #333;
	}

	.comment {
		margin-top: 10rpx;
		padding-left: 40rpx;
		border-left: 4rpx solid #ddd;
		color: #666;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.comment-label {
		color: #666;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.comment p {
		margin: 0;
		color: #666;
	}

	header {
		border: none;
	}
</style>